<template>
  <div flex items-center>
    <img v-if="data.icon" :src="`/icons/${data.icon}.png`" w5 h5 mr1>
    <div>{{ node.label }}</div>
    <ContextMenu title="函数" :context="data.graph" :menu-items="[
      {
        icon: ElIconEdit,
        title: '修改声明',
        action: () => {
          oBus.editParam(data.graph)
          return true
        }
      },
      {
        icon: ElIconDelete,
        title: '删除',
        action: (c) => {
          deleteGraph(c)
          return true
        }
      },
    ]" />
  </div>
</template>

<script setup lang="ts">
import { oBus } from '~/models/graph/editorbus';
import { oGraph, type Graph } from '~/models/graph/graph';
import { PNode } from '~/models/graph/node/prototype';
import { oProject, oStorage } from '~/models/Project';
import type { ResourceTree } from '~/models/resource/rtree';

defineProps<{
  node: any,
  data: ResourceTree
}>()


/** 函数: 删除 */
function deleteGraph(graph: Graph) {
  if (window.confirm(`确定要删除动作: "${graph.name}"?`)) {
    if (oGraph.value === graph) {
      oGraph.value = null
    }
    remove(oProject.value!.storage.graphs, x => x === graph)

    // 找到对应的funciton，断连,移除
    const fsb = PNode.funcFromGraph(graph)
    const dropList = oStorage.value!.nodes.filter(node => node.prototype.same(fsb))
    // console.log('dropList', dropList);


    // 丢弃节点：断连
    dropList.forEach(node => node.slots.forEach(slot => slot.disconnect()))
    // 
    dropList.forEach(node => remove(node.parent()!.nodesId, x => x === node.id))
  }
}
</script>